;(function($, window, document, undefined){

    // "use strict";

    
    var TabPane = function(type, id, title, content, closable){
        this.id = id;
        this.init = function(){
            this.$title = _getHeader(id, title);
            this.$content = _getContent(type, id, content);
        };

        // <li class="active" data-flag="one">tabPane1</li>
        function _getHeader(id, title){
            var closeObj =  (closable == false)? $("") : $("<div class='__tab__header_close'>×</div>");
            return $("<li>").attr("data-flag", id).html(title).append(closeObj);
        };

        function _getContent(type, id, content){
            if(type == "iframe"){
                var div = $("<div>").attr("data-flag", id);
                var iframe = $("<iframe>").attr("src", content).addClass("__tab__content_iframe");
                return div.append(iframe);
            }else {
                // html
                return $("<div>").attr("data-flag", id).html(content);
            }
        }

        this.init();
        return this;
    }


    // begin
    var PLUGIN_NAME = "Tab";
    $[PLUGIN_NAME] = $[PLUGIN_NAME] || {};
    // 
    $[PLUGIN_NAME] = function(element){
        this.init = function(){
            this.$panes = [];
            this.$panesDic = {};
            this.$root = $("<div>").addClass("__tab__");
            var _tabHeader = $("<div>").addClass("__tab__header");
            var _tabHeaderList = $("<div>").addClass("__tab__header_list");
            this.$titles = $("<ul>");
            this.$contents = $("<div>").addClass("__tab__body");

            this.$mobileHeaderTitle = $("<div>");
            this.$mobileHeaderTitle.addClass("__tab__mobile_header_title").css({"display":"none"});
            _tabHeader.append(this.$mobileHeaderTitle);

            // append
            _tabHeader.append(_tabHeaderList.append(this.$titles));
            this.$root.append(_tabHeader).append(this.$contents);

            element.append(this.$root);
            // this.initEvent();
        };

        this.add = function(type, id, title, content, closable){

            var self = this;

            if( id in this.$panesDic){
                this.active(id);
                return;
            }

            var pane = new TabPane(type, id, title, content, closable);
            this.$titles.append(pane.$title);
            this.$contents.append(pane.$content);

            this.$panes.push(pane);
            this.$panesDic[id] = pane;

            //event
            pane.$title.click(function(){
                self.active($(this)[0].getAttribute("data-flag"));
            });

            pane.$title.find(".__tab__header_close").click(function(e){
                var paneID = e.target.parentElement.getAttribute("data-flag");
                if(paneID!=null){
                    self.remove(paneID);
                }
            });

            this.active(id);
        };

        this.active = function(id){
            if( id in this.$panesDic){
                $.each(this.$panes, function(index, value){
                    value.$title.removeClass("active");
                    value.$content.removeClass("active");
                });
                this.$panesDic[id].$title.addClass("active");
                this.$panesDic[id].$content.addClass("active");
            }
        };

        this.remove = function(id){
            var oldActiveID = this.getActive().id;
            var self = this;
            var pane = this.$panesDic[id];
            if(pane){
                try{
                    pane.$title.remove();
                    pane.$content.remove();
                    $.each(this.$panes, function(index, value){
                        if(value.id == id){
                            self.$panes.splice(index, 1);
                            return;
                        }
                    });
                    delete self.$panesDic[id];

                }catch(err){

                }

                if(oldActiveID == id)
                    if( this.$panes.length>0 )
                        self.active(this.$panes[0].id);
            }
        };

        this.getActive = function(){
            var self = this;
            var active = null;
            $.each(this.$panes, function(index, value){
                if($(value.$title[0]).hasClass("active")){
                    active = value;
                    return;
                }
            });
            return active;
        };

        this.initEvent = function(){
            var self = this;
            $(window).resize(function(){
                if(self.$root[0].offsetWidth < 768){
                    self.$root.addClass("__tab__mobile");
                    self.$mobileHeaderTitle.text(self.getActive().title);
                    $(self.$mobileHeaderTitle).click(function(){
                        event.stopPropagation();
                        event.preventDefault();
                        if(self.$titles.is(":hidden"))
                            self.$titles.slideDown();
                        else
                            self.$titles.slideUp();
                        // console.log("mobile title");
                    });
                }else{
                    self.$root.removeClass("__tab__mobile");
                }
            });
        };

        // start 
        this.init();
        return this;
    };







    // result html
    // <div class="__tab__">
    //     <div class="__tab__header">
    //         <div class="__tab__header_left"></div>
    //         <div class="__tab__header_list">
    //             <ul>
    //                 <li class="active" data-flag="one">tabPane1</li>
    //                 <li data-flag="two">tabPane2</li>
    //             </ul>
    //         </div>
    //         <div class="__tab__header_right"></div>
    //     </div>
    //     <div class="__tab__body">
    //         <div data-flag="one" class="active">content of pane 1</div>
    //         <div data-flag="two">content of pane 2</div>
    //     </div>
    // </div>

})(jQuery, window, document);